<template>
  <div class="container">
    <DocDetailSpecialBoxDanger v-model:tableData="data.docCargoDangerList" v-show="data.cargoType=='危险品'" ref="dangerBoxRef"></DocDetailSpecialBoxDanger>
    <docDetailSpecialBoxCold
      v-model:tableData="data.docCargoColdList" v-show="data.cargoType=='冷藏品'"
    ></docDetailSpecialBoxCold>
    <DocDetailSpecialBoxOver v-model:tableData="data.docCargoOverList" v-show="data.cargoType=='超长'"></DocDetailSpecialBoxOver>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import docDetailSpecialBoxCold from "./docDetailSpecialBoxCold.vue";
import DocDetailSpecialBoxDanger from "./docDetailSpecialBoxDanger.vue";
import DocDetailSpecialBoxOver from "./docDetailSpecialBoxOver.vue";
export default defineComponent({
  components: {
    docDetailSpecialBoxCold,
    DocDetailSpecialBoxDanger,
    DocDetailSpecialBoxOver,
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:detailData"],
  computed: {
    data: {
      get() {
        return this.detailData;
      },
      set(value) {
        this.$emit("update:detailData", value);
      },
    },
  },
  data() {
    return {
      // dangerTableData: {
      //   data: [],
      // },
      // coldTableData: {
      //   data: [],
      // },
      // overTableData: {
      //   data: [],
      // },
    };
  },
  methods: {},
  mounted() {},
});
</script>

<style lang="scss" scoped>
.container {
  :deep(.el-input-number) {
    width: 100%;
    .el-input__inner {
      padding: 0 8px;
      text-align: left;
    }

    .el-input-number__decrease {
      display: none;
    }
    .el-input-number__increase {
      display: none;
    }
  }
  :deep(.el-table){
    .el-table__header th{
      background-color: #f7f8fa;
    }
  }
}
</style>
